import React from 'react'
import '../style/shangpinxq.css'
import {Route,Switch} from 'react-router-dom'
import Goods from '../container/goodsContainer'
import Pingjia from './pingjia'
import queryString from 'query-string' 
import { getrestaurant} from '../api/index'

class Shangpinxq extends React.Component {
    constructor(){
        super()
        this.state={
            flag:'/shangpinxq/goods',
            urlitems:'',
            shopinfo:{
                activities:[
                    {
                        icon_color:'#333',
                        icon_name:'11'
                    }
                ],
                image_path:''
            }
        }
    }
    componentWillMount(){
        // console.log('--------------',this.props.location.search)
        let rest=queryString.parse(this.props.location.search);
        this.state.urlitems=rest
    }
    componentDidMount(){
       
       getrestaurant(this.state.urlitems.restaurantId).then(res=>{
        this.setState(()=>{
            this.props.setcurrentshopinfo(res.data)
            this.props.history.push({pathname:'/shangpinxq/goods?id='+this.state.urlitems.restaurantId+'&shopname='+res.data.name})
            return {
                shopinfo:res.data
            }
        })
       })
    //    this.props.history.push({pathname:'/shangpinxq/goods',state:{id:this.state.urlitems.restaurantId}})
    }
    tochange(title,shopname){
        this.props.history.push({pathname:title+'?id='+this.state.urlitems.restaurantId+'&shopname='+shopname})
        this.setState({
            flag:title
        })
    }
    goback(){
       //把前一页的网址保存下来用来返回
       this.props.history.push(localStorage.getItem("routePath"))
    }
    render(){
        return (
            <div>
                <div className='shangpin-header' style={{backgroundImage:'url(https://elm.cangdu.org/img/'+this.state.shopinfo.image_path+')',backgroundRepeat:'no-repeat',backgroundSize:'cover'}}  >
                   <h1 className='shangpin-nav' onClick={this.goback.bind(this)}>&lt;</h1>
                    <div className='shangpin-header-1'>
                        <div className='shangpin-header-1-top'>
                              <img className='shangpin-header-img' src={'https://elm.cangdu.org/img/'+this.state.shopinfo.image_path} />
                              <div className='shangpin-header-right'>
                              <p className='shangpin-header-right-1'>{this.state.shopinfo.name}</p>
                              <p className='shangpin-header-right-2'>{this.state.shopinfo.category}</p>
                              <p className='shangpin-header-right-3'>公告：{this.state.shopinfo.promotion_info}</p>
                              </div>
                        </div>
                        {/* <div  className='shangpin-header-bottom'>
                            <div className='shangpin-header-bottom-1'>
                                <span style={{display:'inline-block',background:'#'+this.state.shopinfo.activities[0].icon_color,padding:'2px',marginRight:'4px'}}>{this.state.shopinfo.activities[0].icon_name}</span>
                            {this.state.shopinfo.activities[0].description }</div>
                        </div> */}
                    </div>
                    <div className='shangpin-header-2'>
                     <div className={['shangpin-header-2-item',this.state.flag=='/shangpinxq/goods'? 'shangpin-header-2-item-active':''].join(' ')} onClick={this.tochange.bind(this,'/shangpinxq/goods',this.state.shopinfo.name)}>商品</div> 
                     <div className={['shangpin-header-2-item',this.state.flag=='/shangpinxq/pingjia'? 'shangpin-header-2-item-active':''].join(' ')} onClick={this.tochange.bind(this,'/shangpinxq/pingjia',this.state.shopinfo.name)}>评价</div>
                    </div>
                 </div>
                <div className='shangpin-container'>
                <Switch>
                    <Route path='/shangpinxq/goods' component={Goods}/>
                    <Route path='/shangpinxq/pingjia' component={Pingjia}/>
                </Switch>
                </div>
            </div>
        )
    }
     
   




}
export default Shangpinxq